<template>
  <div>
    <van-nav-bar title="我的收藏" left-arrow @click-left="backUp" />
    <van-checkbox-group v-model="result" class="goods">
      <van-cell-group class="cart-good">
        <van-cell v-for="item in cartList" :key="item.goods_id">
          <div class="cart-goods-item">
            <div class="pd-images">
              <img :src="item.goods_cover" @click.stop="goodsDetail(item.goods_id)" />
            </div>
            <div class="pd-info">
              <div class="pd-title" @click.stop="goodsDetail(item.goods_id)">{{item.goods_name}}</div>
              <div class="pd-sku" @click.stop="goodsDetail(item.goods_id)">
                <p class="sku-info">
                  {{item.goods_attr}}&nbsp;&nbsp;
                  <span>包邮</span>
                </p>
              </div>
              <div class="pd-price">
                <div class="total">
                  <span>&yen;</span>
                  {{item.goods_price}}
                </div>
                <p @click.stop="deleteFavour(item.goods_id)">取消收藏</p>
              </div>
            </div>
          </div>
        </van-cell>
      </van-cell-group>
    </van-checkbox-group>
    <div v-if="cartList.length==0" class="none">
      <img src="../../assets/imgList/none.jpg" />
      <p>这里什么也没有</p>
    </div>
  </div>
</template>

<script>
import {
  NavBar,
  Checkbox,
  CheckboxGroup,
  Card,
  Toast,
  Icon,
  Cell,
  CellGroup
} from "vant";
import api from "@/utils/api";
export default {
  name: "collection",
  components: {
    [Card.name]: Card,
    [Checkbox.name]: Checkbox,
    [CheckboxGroup.name]: CheckboxGroup,
    [NavBar.name]: NavBar,
    [Icon.name]: Icon,
    [Cell.name]: Cell,
    [CellGroup.name]: CellGroup
  },

  data() {
    return {
      result: [],
      cartList: [],
      isLogin: true
    };
  },
  mounted() {
    this.getFavlist();
  },
  methods: {
    getFavlist() {
      this.$axios({
        method: "get",
        url: api.favlist,
        params: {
          token: localStorage.getItem("token")
        }
      }).then(res => {
        console.log(res);
        this.cartList = res;
      });
    },
    deleteFavour(goods_id) {
      this.$axios({
        method: "post",
        url: api.deleteFavour,
        data: this.$qs.stringify({
          token: localStorage.getItem("token"),
          goods_id: goods_id
        })
      }).then(res => {
        console.log(res);
        this.getFavlist();
      });
    },
    backUp() {
      this.$router.go(-1);
    },
    goodsDetail(goods_id) {
      this.$router.push({ name: "goods", query: { goods_id: goods_id } });
    }
  }
};
</script>
<style lang="less" scoped>
@import "~style/common.less";
.goods {
  .flexbox(flex-start, space-between, column, wrap);
  // background: linear-gradient(180deg, @bgColor, @tipColor);
  .cart-good {
    // border: 1px solid blue;
    .flexbox(flex-start, space-between, column, wrap);
    background: transparent;
    flex: initial;
    .van-cell__value {
      .flexbox(center, center, row, nowrap);
    }
    .cart-goods-item {
      // flex-basis: 90%;
      max-width: 90vw;
      // border: 1px solid #f9f;
      .flexbox(flex-start, center, row, nowrap);
      padding: 5px;
      // border-bottom: 1px solid @borderColor;
      &:last-child {
        border-bottom: none;
      }
      .pd-images {
        border: 1px solid @borderColor;
        // border: 1px solid #f0f;

        margin: 0 15px 0 5px;
        flex: 1;
        img {
          width: 90px;
          height: 90px;
        }
      }
      .pd-info {
        flex: 3;
        // .flexbox(flex-start, space-between, column, wrap);
        max-width: 68% !important;
        // flex: initial;
        // border: 1px solid blue;

        .pd-title {
          position: relative;
          // border: 1px solid red;
          // .textoverflow(@clamp:2);
          text-overflow: ellipsis;
          overflow: hidden;
          display: -webkit-box;
          /* autoprefixer: off */
          -webkit-box-orient: vertical;
          /* autoprefixer: on */
          -webkit-line-clamp: 2;

          max-width: 100%;
          .font-dpr(12px);
          color: @fontColorH3;
        }
        .pd-sku {
          padding: 5px 0;
          line-height: 1.5;
          .font-dpr(11px);
          color: @tipColor;
          span {
            display: inline-block;
            width: 40px;
            line-height: 20px;
            border: 1px solid @priColor;
            border-radius: 10px;
            text-align: center;
            color: @priColor;
          }
        }
        .pd-price {
          margin-top: 10px;
          .total {
            .font-dpr(14px);
            color: @secColor;
          }
          .flexbox(space-between, center, row, nowrap);
          flex: initial;

          p {
            .font-dpr(12px);
            color: @tipColor;
            display: inline-block;
            padding: 2px 10px;
            border: 1px solid @priColor;
            border-radius: 15px;
            text-align: center;
            color: @priColor;
          }
        }
      }
      .van-checkbox {
        // border: 1px solid @fontColorH3;
        position: absolute;
        left: 0;
      }
    }
  }
}
.none {
  height: calc(100vh - 46px);
  box-sizing: border-box;
  padding-top: 100px;
  text-align: center;
  img {
    width: 200px;
    height: 200px;
  }
  p {
    margin-top: 20px;
    padding: 15px 0;
    font-size: 16px;
    color: #999;
  }
}
</style>